<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq.js"></script>
</head>
<body>
    <div class="content">
        <table border="1">
            <thead class="thead">
                <tr>
                    <th>全选<input type="checkbox" name="" class="check-all"></th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>小计</th>
                </tr>
            </thead>
            <tr>
                <td>总计</td>
                <td></td>
                <td></td>
                <td><span class="total-num"></span>件</td>
                <td><span class="total-price"></span>元</td>
            </tr>
        </table>
    </div>
</body>
<script src="./data.js"></script>
<script>
    $(function(){
        var cartList = JSON.parse(localStorage.getItem('cartList'))|| [];
        var cartGoods = [];
        window.onload = function(){
            // 根据id获取购物车中的数据
            getDataById();
             // 计算金额和数量
            // getTotal();
             console.log(cartList.length);
        }
        // 根据id获取购物车中的数据
        function getDataById(){
            if(cartList.length){
                    // 购物车中有内容
                    $.each(cartList,function(i,item){
                        // 这个item是购物车中存的id
                        $.each(data,function(num,goods){
                            // 选择购物车中的商品，存入数组
                            if(goods.id==item){
                                // 每个商品默认数量是1
                                goods.num = 1;
                                 // 默认每个商品都不勾选
                                goods.isChecked = false;
                                 // goods.price = goods.price * 10000;
                                 cartGoods.push(goods);
                            }
                        })
                    })
                    console.log(cartGoods);
                    // 渲染页面
                    renderTable(cartGoods)
            }else{
                 // 购物车为空
                 var content = '<tr><td colspan=5>购物车为空,买买买！</td></tr>';
                    $('.thead').after(content);
            }
        }
        console.log(data);
        function renderTable(da) {
                var content = '';
                $.each(da, function (i, item) {
                    content += "<tr><td><input type=checkbox class=check-item></td>" +
                        "<td>" + item.name + "</td>" +
                        "<td>" + item.price + "</td>" +
                        "<td>" + item.num + "</td>" +
                        "<td>" + item.num * item.price + "</td>" +
                        "</tr>"
                })
                console.log(content);
                
                $('.thead').after(content);
            }
             // 通过jq获取多选框的值
            // 全选分成两步，写两个函数：1。点击全选按钮，获取他的状态，分配给每件商品（遍历）
            // 2.点击每一件商品前面的按钮，遍历每一件商品，如果都是true 就让check-all也是true；如果有false，check-all就也是false
            // $('.check-all').change(function () {
            //     // 先获取当前框是否选中---是否要全选
            //     let flag = this.checked;
            //     // 修改数据，每个商品的状态和全选的框状态一致
            //     $.each(cartGoods, function (i, item) {
            //         item.isChecked = flag;
            //     })
            //     // 修改页面
            //     $.each($('.check-item'), function (i, item) {
            //         item.checked=flag
            //     })
            //     getTotal()
            // })

            // // 点击每一件商品前面的按钮,要遍历所有的商品--进而影响第一行那个全选的值
            // $('.content').on('change', '.check-item', function () {
            //     var isAll = false;
            //     var arr = [];
            //     $.each($('.check-item'), function(i,item) {
            //         // 修改数据
            //         cartGoods[i].isChecked = item.checked;
            //         arr.push(item.checked)
            //     })
            //     isAll = arr.every(function(a){
            //         return a
            //     });
            //     // 勾选全选的框
            //     $('.check-all').prop('checked' ,isAll);
            //     getTotal()
            // })

            // // 计算金额和数量 给每隔个商品加一条数据，用来表示是否勾选isChecked
            // function getTotal() {
            //     var totalNum = 0;
            //     var totalPrice = 0;
            //     cartGoods.map(function(item, index) {
            //         if(item.isChecked) {
            //             totalNum += item.num;
            //             totalPrice += item.num * item.price;
            //         }
            //         totalPrice = totalPrice;
            //     })
            //     $('.total-num').html(totalNum);
            //     $('.total-price').html(totalPrice);
            // }
    })
</script>
</html>